<template>
  <div id="reward_queue" :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">
    <c-title :hide="false" :text="WXtitle" tolink="IntegralGetRecord"> </c-title>
    <diyBackGround :minHeight="'10.03rem'">
      <div class="newHead">
        <div class="newHead_member">
          <img :src="avatar" class="avatarimg" />
          <div class="name">{{ nickname }}</div>
        </div>
        <div class="cloumBox">
          <div class="cloumLine" @click="toDetail">查看详情<i class="iconfont icon-ht_more_right"></i></div>
          <div class="cloumLine" @click="ruleShow = true" v-if="rule_desc.rules_description_enabled == 1">规则说明<i class="iconfont icon-ht_more_right"></i></div>
        </div>
      </div>
    </diyBackGround>

    <div id="reward_header">
      <div class="reward_box">
        <ul class="reward_a">
          <li class="reward_num">
            <span>{{ $i18n.t("money") }}</span
            >{{ Math.floor(summarizing.finish_total * 100) / 100 }}
          </li>
          <li class="reward_txt">累计奖励</li>
        </ul>
        <ul class="reward_b">
          <li class="reward_num">
            <span>{{ $i18n.t("money") }}</span
            >{{ Math.floor(summarizing.surplus_total * 100) / 100 }}
          </li>
          <li class="reward_txt">待奖励</li>
        </ul>
      </div>
    </div>
    <div id="queue_content" style="padding-bottom: 3rem;">
      <van-tabs v-model="chooseName" @click="handleClick1" background="#F5F5F5" line-width="30px" title-active-color="#F15353">
        <van-tab name="queue" title="奖励队列" title-style="font-weight: bold;font-size: 0.94rem;"></van-tab>
        <van-tab name="record" title="奖励记录" title-style="font-weight: bold;font-size: 0.94rem;"></van-tab>
      </van-tabs>
      <template>
        <div v-show="chooseName == 'queue'">
          <div v-if="summarizing.goods_queue_count > -1" class="label_flex">
            <div class="labelBox" v-for="(item, index) in label_order" :key="index" @click="handleClick(item)" :class="{ lavelBox_txt_select: activeName == item }">
              <span class="lavelBox_txt" v-if="item == 'shop'">{{ "商品(" + summarizing.goods_queue_count + ")" }}</span>
              <span class="lavelBox_txt" v-if="item == 'store'">{{ "门店(" + summarizing.store_queue_count + ")" }}</span>
              <span class="lavelBox_txt" v-if="item == 'cashier'">{{ "收银台(" + summarizing.cashier_queue_count + ")" }}</span>
            </div>
          </div>
          <div style="border-radius: 0.5rem;background-color: #fff;" v-show="summarizing.goods_queue_count > -1 || summarizing.store_queue_count > -1 || summarizing.cashier_queue_count > -1">
            <div class="queue_box" v-for="(item, i) of rewardList" :key="i">
              <div class="queue_a" v-if="is_queue_id == 1">奖励队列：{{ item.id }}</div>
              <div class="queue_b">
                <div class="queue_top">
                  <div class="img">
                    <img :src="item.source_thumb" />
                  </div>
                  <span class="source_name">{{ item.source_name }}</span>
                </div>
                <div class="queue_center">
                  <ul class="reward_queue_a" @click.stop="toQueueDetail({queue_id: item.id,isTo: item.has_share_chain_avg_reward})">
                    <li>
                      <span>{{ $i18n.t("money") }}</span
                      >{{ item.amount_total }}
                    </li>
                    <li>奖励数量 <i v-if="item.has_share_chain_avg_reward" class="iconfont icon-advertise-next f-14 f-bold"></i> </li>
                  </ul>
                  <ul class="reward_queue_b">
                    <li>
                      <span>{{ $i18n.t("money") }}</span
                      >{{ item.amount_finish }}
                    </li>
                    <li>已奖励</li>
                  </ul>
                  <ul class="reward_queue_c">
                    <li>{{ item.status_name }}</li>
                  </ul>
                </div>
                <div class="line_up" v-if="item.status == 0">
                  <template v-if="is_queue_line_up"
                    >前面排队数<span>{{ item.wait_nums }}</span></template
                  >
                  <template v-if="is_queue_line_up && is_awaiting_rewards">，</template
                  ><block v-if="is_awaiting_rewards == 1"
                    >前面待奖励<span>¥{{ item.wait_price }}</span></block
                  >
                </div>
              </div>
              <div class="queue_c" v-if="!item.show" @click="showComplete(item)">
                <span>展开</span>
                <i class="iconfont icon-xia"></i>
              </div>
              <transition name="fade">
                <ul class="queue_c_down" v-if="item.show">
                  <li class="queue_c_down_li">
                    <span class="queue_c_down_li_left">订单编号</span>
                    <span class="queue_c_down_li_right">{{ item.order_sn }}</span>
                  </li>
                  <li class="queue_c_down_li">
                    <span class="queue_c_down_li_left">奖励结算金额</span>
                    <span class="queue_c_down_li_right">{{ $i18n.t("money") }}{{ item.price }}</span>
                  </li>
                  <li v-if="show_reward_ratio" class="queue_c_down_li">
                    <span class="queue_c_down_li_left">奖励比例：</span>
                    <span class="queue_c_down_li_right">{{ item.ratio }}</span>
                  </li>
                </ul>
              </transition>
              <div class="queue_bottom">
                <button class="button_side" @click="exchange(item)" v-if="item.button && item.button.exchange">{{ item.button.exchange.name }}</button>
                <button class="button_side" @click="exchangeLog(item)" v-if="item.button && item.button.exchange_log">{{ item.button.exchange_log.name }}</button>
                <button class="button_side" @click="toProcess(item)" v-if="item.button && item.button.process && is_queue_process == 1">{{ item.button.process.name }}</button>
                <button class="button_side draw" @click="luckyDraw(item)" v-if="item.button && item.button.lucky_draw">{{ item.button.lucky_draw.name }}</button>
              </div>
            </div>
          </div>
        </div>
        <div v-show="chooseName == 'record'" style="border-radius: 0.5rem;background-color: #fff;margin-top:0.5rem">
          <div class="queue_box" v-show="chooseName === 'record'" v-for="(item, i) of rewardList" :key="i">
            <div class="queue_a">
              <span>奖励队列：{{ item.queue_id }}</span>
            </div>
            <div class="queue_b">
              <div class="queue_top">
                <div class="img" v-if="item.source_thumb">
                  <img :src="item.source_thumb" />
                </div>
                <span class="source_name" v-if="item.source_name">{{ item.source_name }}</span>
              </div>
              <div class="queue_center">
                <ul class="reward_queue_a">
                  <li>
                    <span>{{ $i18n.t("money") }}</span
                    >{{ item.amount_finish }}
                  </li>
                  <li>已奖励数量</li>
                </ul>
                <ul class="reward_queue_b">
                  <li>
                    <span>{{ $i18n.t("money") }}</span
                    >{{ item.amount_surplus }}
                  </li>
                  <li>未奖励数量</li>
                </ul>
                <ul class="reward_queue_c">
                  <li>{{ item.status_name }}</li>
                </ul>
              </div>
            </div>
            <div class="queue_c" v-if="!item.show" @click="showComplete(item)">
              <span>展示完整信息</span>
              <i class="iconfont icon-down"></i>
            </div>

            <transition name="fade">
              <div v-if="item.show">
                <ul class="queue_c_down">
                  <template v-if="item.type == 0">
                    <li class="queue_c_down_li">
                      <span class="queue_c_down_li_left">订单编号</span>
                      <span class="queue_c_down_li_right">{{ item.order_sn }}</span>
                    </li>
                    <li class="queue_c_down_li">
                      <span class="queue_c_down_li_left">实付款</span>
                      <span class="queue_c_down_li_right">{{ $i18n.t("money") }}{{ item.price }}</span>
                    </li>
                    <li v-if="show_reward_ratio" class="queue_c_down_li">
                      <span class="queue_c_down_li_left">奖励比例：</span>
                      <span class="queue_c_down_li_right">{{ item.ratio }}</span>
                    </li>
                  </template>
                  <template v-if="item.type == 1">
                    <li class="queue_c_down_li">
                      <span class="queue_c_down_li_left">时间</span>
                      <span class="queue_c_down_li_right">{{ item.created_at }}</span>
                    </li>
                  </template>
                  <template v-if="item.type_name">
                    <li class="queue_c_down_li">
                      <span class="queue_c_down_li_left">奖励类型</span>
                      <span class="queue_c_down_li_right">{{ item.type_name }}</span>
                    </li>
                  </template>
                </ul>
              </div>
            </transition>
          </div>
        </div>
      </template>
    </div>

    <!-- 兑换类型弹窗 -->
    <van-popup v-model="show3" round :style="{ width: '17.5rem' }" closeable>
      <div class="queue_type">
        <h1>兑换类型</h1>
        <ul class="selete">
          <li class="selete_l">兑换类型：</li>
          <li class="inpBox">
            <input type="text" v-model="convertType" disabled placeholder="请选择" />
            <i class="iconfont icon-icon_more11"></i>
          </li>
        </ul>
        <ul class="typeBox" v-if="typeData.modules">
          <li v-if="typeData.modules.love" @click="chooseType(typeData.modules.love)">
            <span>{{ typeData.modules.love.name }}</span>
            <span :class="convertTypeId === 2 ? 'circle choose' : 'circle'">
              <i class="iconfont icon-all_select_choose" v-show="convertTypeId === 2"></i>
            </span>
          </li>
          <li v-if="typeData.modules.point" @click="chooseType(typeData.modules.point)">
            <span>{{ typeData.modules.point.name }}</span>
            <span :class="convertTypeId === 1 ? 'circle choose' : 'circle'">
              <i class="iconfont icon-all_select_choose" v-show="convertTypeId === 1"></i>
            </span>
          </li>
        </ul>
        <ul class="queue_info">
          <li>可用兑换数量：{{ typeData.exchange_amount }}{{ exchange_name || '元' }}</li>
          <li v-show="convertType">当前兑换比例：1{{ exchange_name || '元'}}={{ convertTypeUnit }}{{ convertType }}</li>
          <li v-show="convertType">可兑换：{{ convertTypeExchange_count }}{{ convertType }}</li>
        </ul>
        <button class="queue_btn" style="border: none;" @click="beforeSureExchange">确认兑换</button>
      </div>
    </van-popup>
    <van-popup v-model="showeforeSurePop" round :close-on-click-overlay="false" :style="{ width: '17.5rem' }">
      <!-- <van-nav-bar :title="typeData.pop_ups.pop_ups_title" /> -->
      <div class="confirmBox">
        <div class="confirmBox_title">确认兑换</div>
        <div class="confirmBox_conten">
          <div v-html="typeData.pop_ups.pop_ups_content"></div>
        </div>
        <div class="confirmBox_check">
          <van-checkbox v-model="checkedSurePop" icon-size="18px" checked-color="#ee0a24">
            <div class="confirmBox_check_text">我已阅读以上说明内容</div>
          </van-checkbox>
        </div>
        <div class="confirmBox_button">
          <div class="confirmBox_button_box" @click="showeforeSurePop = false">取消</div>
          <div class="confirmBox_button_box sure" @click="SureExchange">同意</div>
        </div>
      </div>
    </van-popup>
    <!-- end -->

    <!-- 抽奖弹窗 -->
    <van-popup v-model="show1" :style="{ height: '18.75rem', width: '17.5rem' }" round>
      <div class="prize_box">
        <div class="prize_box_h1">抽奖提示</div>
        <div class="prize_content">当前默认奖励比例：{{ chooseRatio }}</div>
        <div class="prize_desc">如果您使用抽奖权益，最终奖励比例将以抽奖结果为准，可能高于、也可能低于默认奖励比例！</div>
        <div class="prize_btn">
          <div @click="show1 = false" class="cancelBtn">取消</div>
          <div @click="sureTake()" class="confirmBtn">抽奖</div>
        </div>
      </div>
    </van-popup>
    <!-- end -->

    <!-- 抽奖弹窗2 -->
    <van-popup v-model="show2" :style="{ width: '17.5rem' }" round>
      <div class="prize_box">
        <div class="prize_box_h1">抽奖结果</div>
        <div class="prize_desc">{{ msg }}</div>
        <div class="ture_btn" style="border: none;" @click="show2 = false">确认</div>
      </div>
    </van-popup>
    <!-- end -->

    <!-- 查看兑换记录弹窗 -->
    <van-popup v-model="show4" :style="{ width: '17.5rem', background: 'transparent' }">
      <div style="overflow:hidden;">
        <div class="reward_record" v-if="exchangeLogs.exchange_amount">
          <div class="reward_record_txt">兑换记录</div>
          <ul>
            <li class="reward_record_li">兑换数量:{{ exchangeLogs.exchange_amount }}</li>
            <li class="reward_record_li">兑换比例:{{ exchangeLogs.exchange_unit }}</li>
            <li class="reward_record_li">兑换:{{ exchangeLogs.exchange_count }}</li>
          </ul>
        </div>
        <div class="reward_record_icon">
          <i class="iconfont icon-add2" @click="show4 = false"></i>
        </div>
      </div>
    </van-popup>
    <!-- end -->
    <!-- 规则说明 -->
    <van-popup v-model="ruleShow" :style="{ width: '17.5rem', background: 'transparent' }">
      <div class="ruleBox">
        <div class="ruleBox_centen">
          <div class="ruleBox_centen_title">规则说明</div>
          <div class="ruleBox_centen_box" v-if="rule_desc.rules_description_enabled == 1">
            <div v-html="rule_desc.rules_description"></div>
          </div>
        </div>
        <div class="ruleBox_icon">
          <i class="iconfont icon-add2" @click="ruleShow = false"></i>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import reward_queue_controller from "./reward_queue_controller";

export default reward_queue_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.queue_c_manual {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  margin-top: 0.75rem;
  border-top: solid 0.0625rem #ebebeb;
  padding: 0.625rem 0.875rem;
}
#reward_queue {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;

  #reward_header {
    margin: 0 0.75rem;
    margin-top: -3.44rem;
    .reward_box {
      background: #ffffff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 4.41rem;
      background: #ffffff;
      border-radius: 0.5rem;

      .reward_a,
      .reward_b {
        flex: 1;
        text-align: center;
        .reward_num {
          font-size: 0.94rem;
          font-weight: bold;
        }
        .reward_txt {
          font-size: 0.75rem;
          color: #6e6e79;
          line-height: 1.25rem;
        }
      }
    }
  }

  #queue_content {
    margin: 0 0.75rem;
    .label_flex {
      display: flex;
      align-items: center;
      margin: 0.75rem 0;
      .labelBox {
        width: 6rem;
        padding: 0 0.8rem;
        box-sizing: border-box;
        height: 2rem;
        background: #f0f0f1;
        border-radius: 0.5rem;
        line-height: 2rem;
        margin-left: 1.25rem;
        font-size: 0.81rem;
        overflow: hidden;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .lavelBox_txt {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .lavelBox_txt_select {
        border: 0.03rem solid #f15353;
        color: #f15353;
        background-color: #f5e4e4;
      }
      .labelBox:first-child {
        margin-left: 0;
      }
    }

    .queue_box {
      padding: 0.94rem 0;
      margin: 0 0.75rem;
      box-sizing: border-box;
      border-bottom: 1px solid #f0f0f1;
      .queue_a {
        display: flex;
        justify-content: space-between;
        font-size: 0.81rem;
      }

      .queue_b {
        margin-top: 0.75rem;
        .queue_top {
          display: flex;
          position: relative;

          .img {
            flex-shrink: 0;
            width: 2.25rem;
            height: 2.25rem;
            overflow: hidden;
            border-radius: 50%;
            margin-right: 0.53rem;
            background-color: #f8f8f8;
            img {
              width: 100%;
              height: 2.25rem;
              border-radius: 50%;
            }
          }

          .source_name {
            flex: 1;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 2.25rem;
            font-size: 1rem;
          }

          .btn_a {
            width: 3.75rem;
            height: 1.625rem;
            border-radius: 0.1875rem;
            border: none;
            background-color: #f15353;
            color: #fff;
            position: absolute;
            right: 0.875rem;
            top: 0.9375rem;
            font-size: 14px;
          }
        }

        .queue_center {
          display: flex;
          margin-top: 0.63rem;
          background: #fafafa;
          border-radius: 0.63rem;
          padding: 0.56rem 0;
          ul {
            width: 33.33%;
            justify-content: center;
          }

          .reward_queue_a,
          .reward_queue_b {
            li:first-child {
              font-size: 16px;
              height: 1.625rem;
              line-height: 1.625rem;
              font-weight: bold;

              span {
                font-size: 14px;
              }
            }

            li:last-child {
              line-height: 1.5rem;
              color: #8c8c8c;
              font-size: 14px;
            }
          }

          .reward_queue_c {
            font-size: 16px;
            color: #f15353;
            text-align: center;
            line-height: 3.125rem;
          }
        }

        .line_up {
          text-align: left;
          color: #454545;
          margin-top: 0.78rem;
          font-weight: bold;
          span {
            color: #f15353;
          }
        }
      }

      .queue_c {
        display: flex;
        align-items: center;
        margin-top: 0.75rem;
        font-size: 0.81rem;
        color: #6e6e79;
        i {
          color: #6e6e79;
          font-size: 1rem;
        }
      }

      .queue_c_down {
        margin-top: 0.75rem;
        font-size: 0.81rem;
        .queue_c_down_li {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0.75rem;
          .queue_c_down_li_left {
            font-size: 0.81rem;
            color: #6e6e79;
          }
          .queue_c_down_li_right {
            font-size: 0.81rem;
          }
        }
      }

      .queue_bottom {
        display: flex;
        justify-content: flex-end;
        margin-top: 0.75rem;
        .button_side {
          width: 5.1rem;
          height: 1.75rem;
          background-color: #fff;
          color: #333;
          font-size: 0.81rem;
          border: 0.03rem solid #707070;
          border-radius: 0.88rem;
          margin-left: 0.75rem;
        }
        .draw {
          background: var(--themeBaseColor);
          color: #ffffff;
          border: none;
        }
      }

      .fade-enter-active {
        transition: 0.5s;
      }

      .fade-enter,
      .fade-leave-active {
        opacity: 0;
        height: 0;
      }
    }
  }

  // 兑换类型css
  .queue_type {
    // position: relative;
    padding: 0 0.94rem;
    box-sizing: border-box;
    padding-bottom: 1rem;
    h1 {
      margin: 1.94rem 0;
      text-align: center;
      font-weight: 500;
      font-size: 1.06rem;
    }

    .selete {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.94rem;
      .selete_l {
        flex-shrink: 0;
      }
      .inpBox {
        flex: 1;
        display: flex;
        align-items: center;
        input {
          border: none;
          outline: none;
          font-size: 16px;
          text-align: right;
        }
        .icon-icon_more11 {
          color: #c9c9c9;
        }
      }
    }

    .typeBox {
      margin-top: 0.94rem;
      li {
        display: flex;
        justify-content: space-between;
        font-size: 0.94rem;
        margin-bottom: 0.94rem;
        .circle {
          flex-shrink: 0;
          width: 1.13rem;
          height: 1.13rem;
          border: 0.03rem solid #aaaab3;
          border-radius: 50%;
          display: inline-block;
        }

        .choose {
          background: #f15353;
          border: 1px solid #f15353;
          display: flex;
          align-items: center;
          justify-content: center;
          .icon-all_select_choose {
            color: #fff;
            font-size: 0.6rem;
          }
        }
      }
    }

    .queue_info {
      background-color: #f5f5f5;
      padding: 0.625rem 0.875rem;

      li {
        line-height: 1.875rem;
        text-align: left;
        font-size: 15px;
        color: #8c8c8c;
      }
    }

    .queue_btn {
      width: 100%;
      height: 2rem;
      border-radius: 1.09rem;
      font-size: 0.81rem;
      color: #ffffff;
      background-color: var(--themeBaseColor);
    }
  }
  // 确认兑换弹窗
  .confirmBox {
    padding: 1.94rem 0.94rem 1rem 0.94rem;
    box-sizing: border-box;
    .confirmBox_title {
      font-weight: 500;
      font-size: 1.06rem;
      color: #00001c;
      margin-bottom: 1.03rem;
    }
    .confirmBox_conten {
      background: #f5f5f5;
      border-radius: 0.31rem;
      padding: 0.91rem 0.81rem;
      box-sizing: border-box;
    }
    .confirmBox_check {
      margin-top: 1rem;
      display: flex;
      align-items: center;
      .confirmBox_check_text {
        font-size: 0.81rem;
        color: #f15353;
      }
    }
    .confirmBox_button {
      margin-top: 1.88rem;
      display: flex;
      justify-content: space-around;
      .confirmBox_button_box {
        width: 5.5rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border-radius: 1rem;
        border: 0.03rem solid #707070;
        font-size: 0.81rem;
      }
      .sure {
        background: #fe5e56;
        border: none;
        color: #fff;
      }
    }
  }

  // end
  //抽奖提示css
  .prize_box {
    // position: relative;
    background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/reward_queue%2Freward_queue_bg.png");
    background-repeat: no-repeat;
    background-size: 17.5rem 8.34rem;
    background-position: 0 0;
    overflow: hidden;
    .prize_box_h1 {
      font-weight: 500;
      font-size: 1.06rem;
      margin: 0 auto;
      margin-top: 1.94rem;
      margin-bottom: 2.31rem;
    }

    .prize_content {
      font-size: 0.94rem;
      color: #f15353;
      text-align: left;
      padding-left: 0.94rem;
    }
    .prize_desc {
      margin: 0.94rem 0.94rem 1rem 0.94rem;
      padding: 0.94rem 0.81rem;
      box-sizing: border-box;
      background: #f5f5f5;
      border-radius: 0.31rem;
      font-size: 0.88rem;
      color: #6e6e79;
      text-align: left;
      line-height: 1.5rem;
    }

    .ture_btn {
      margin: 0 auto;
      width: 15.63rem;
      height: 2rem;
      background: #fe5e56;
      border-radius: 1.09rem;
      font-size: 0.81rem;
      color: #ffffff;
      text-align: center;
      line-height: 2rem;
      margin-bottom: 1.4rem;
    }

    .prize_btn {
      display: flex;
      justify-content: center;

      .confirmBtn {
        width: 5.5rem;
        height: 2rem;
        line-height: 2rem;
        background: #fe5e56;
        border-radius: 1.09rem;
        font-size: 0.81rem;
        color: #ffffff;
      }

      .cancelBtn {
        width: 5.5rem;
        line-height: 2rem;
        height: 2rem;
        background: #fff;
        border-radius: 1.09rem;
        font-size: 0.81rem;
        border: 0.03rem solid #707070;
        margin-right: 2.06rem;
      }
    }
  }
  .ruleBox {
    overflow: hidden;
    .ruleBox_centen {
      width: 17.5rem;
      height: 17.59rem;
      background: #ffffff;
      margin-bottom: 1.25rem;
      border-radius: 0.63rem;
      overflow: hidden;
      overflow-y: scroll;
      .ruleBox_centen_box {
        background: #f5f5f5;
        border-radius: 0.31rem;
        margin: 0 0.94rem 1rem 0.94rem;
        padding: 0.94rem 0.75rem;
        box-sizing: border-box;
        text-align: left;
        font-size: 0.94rem;
        color: #6e6e79;
      }
      .ruleBox_centen_title {
        font-weight: 500;
        font-size: 1.06rem;
        margin-top: 1.94rem;
        margin-bottom: 1.03rem;
        text-align: center;
      }
    }
    .ruleBox_icon {
      transform: rotate(45deg);
      .icon-add2 {
        color: #fff;
        font-size: 1.7rem;
      }
    }
  }

  // 记录弹窗css
  .reward_record_icon {
    transform: rotate(45deg);
    margin: 0 auto;
    margin-top: 1rem;
    width: 2rem;
    .icon-add2 {
      color: #fff;
      font-size: 1.5rem;
    }
  }

  .reward_record {
    background-color: #ffffff;
    padding-bottom: 1.88rem;
    border-radius: 0.63rem;
    .reward_record_txt {
      font-weight: bold;
      font-size: 1.06rem;
      padding: 1.09rem 0 1.25rem 0;
      box-sizing: border-box;
    }

    ul {
      margin: 0 0.94rem;
      padding: 0.94rem 0.75rem;
      box-sizing: border-box;
      background-color: #f5f5f5;
      border-radius: 0.31rem;
      .reward_record_li {
        font-size: 0.94rem;
        color: #00001c;
        margin-bottom: 0.94rem;
        text-align: left;
      }
      .reward_record_li:last-child {
        margin-bottom: 0;
      }
    }

    button {
      width: 23.4375rem;
      border-radius: 0;
      height: 2.8125rem;
      font-size: 18px;
      color: #fff;
      background-color: #f15353;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
}
.newHead {
  display: flex;
  justify-content: space-between;
  .newHead_member {
    margin-top: 0.88rem;
    margin-left: 1.06rem;
    display: flex;
    align-items: center;
    .avatarimg {
      width: 3.44rem;
      height: 3.44rem;
      border-radius: 50%;
    }
    .name {
      font-size: 1rem;
      color: #ffffff;
      font-weight: 500;
      margin-left: 0.53rem;
    }
  }
  .cloumBox {
    margin-top: 1.22rem;
    margin-right: 0.75rem;
    .cloumLine {
      background-color: rgba(255, 255, 255, 0.3);
      width: 5.88rem;
      height: 1.75rem;
      border-radius: 1.03rem;
      line-height: 1.75rem;
      color: #ffffff;
      .icon-ht_more_right {
        font-size: 0.5rem;
        color: #ffffff;
        margin-left: 0.4rem;
      }
    }
    .cloumLine:last-child {
      margin-top: 0.63rem;
    }
  }
}
</style>
